<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chicken and Rabbit Cages Problem</title>
<link rel="stylesheet" href="p3.css">
</head>
<body>

<div class="container">
  <h3>循环解决鸡兔同笼问题</h3>
  <div class="input-group">
    <label for="total-animals">鸡兔同笼，鸡兔一共:</label>
    <input type="number" id="total-animals" class="input-number">
    <span class="input-text">只。</span>
    <label for="total-legs">笼子里脚一共:</label>
    <input type="number" id="total-legs" class="input-number">
    <span class="input-text">只，请问分别有多少只鸡和兔？</span>
    <button id="calculate">计算</button>
  </div>
  <p id="result"></p>
</div>

<!--
<script>
  document.getElementById('calculate').addEventListener('click', function() {
    const totalAnimals = parseInt(document.getElementById('total-animals').value, 10);
    const totalLegs = parseInt(document.getElementById('total-legs').value, 10);
    const result = solveChickenRabbit(totalAnimals, totalLegs);
    document.getElementById('result').textContent = result.message;
    if (result.chickens !== undefined && result.rabbits !== undefined) {
      document.getElementById('result').style.color = 'blue';
      document.getElementById('result').style.fontWeight = 'bold';
    } else {
      document.getElementById('result').style.color = 'red';
      document.getElementById('result').style.fontWeight = 'bold';
    }
  });

  function solveChickenRabbit(totalAnimals, totalLegs) {
    for (let i = 0; i <= totalAnimals; i++) {
      const j = totalAnimals - i;
      if (2 * i + 4 * j === totalLegs && i + j === totalAnimals) {
        return { message: `鸡：${i}只，兔：${j}只`, chickens: i, rabbits: j };
      }
    }
    return { message: '无解' };
  }
</script>
-->

<script src="p3.js"></script>

</body>
</html>